<template>
  <div class="nav">
    <div class="nav-header">
      <div class="nav-hea-io" v-show="isView==true" @click="login_out">
        <div><img src="@/assets/icon/exit.svg"></div>
      </div>
      <div class="nav-hea-io" v-show="isView==false" @click="login_out">
        <div>
          <svg t="1646812439646" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4140" width="25" height="25"><path d="M853.333333 128h-256V42.666667h341.333334v938.666666h-341.333334v-85.333333h256z" p-id="4141"></path><path d="M652.16 469.333333L512 319.445333 571.306667 256 810.666667 512l-239.36 256L512 704.554667 652.16 554.666667H85.333333v-85.333334z" p-id="4142"></path></svg>
        </div>
        <!-- <span>登录</span> -->
      </div>
      <div class="nac-header-service" @click="routerChange">
        <div><img src="@/assets/icon/set.svg"></div>
        <!-- <span>设置</span> -->
      </div>
      <div class="nav-header-set" size="25px">
        <div><img src="@/assets/icon/service.svg"></div>
        <!-- <span>客服</span> -->
      </div>
    </div>
    <div class="nav-view">
      <div class="nav-view-img" v-show="isView==true">
        <img src="https://school-serve.oss-cn-chengdu.aliyuncs.com/upload/20220406/ecb12610-9b43-411a-85da-a1783b4450bc04361.png">
        
      </div>
      <div class="nav-view-img svg" v-show="isView==false" >
        <svg t="1646812657370" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4454" width="70" height="70"><path d="M956.504 0c35.584 0 64.432 31.128 64.432 69.528V954.48c0 38.4-28.848 69.528-64.432 69.528H64.44C28.848 1024 0 992.872 0 954.472V69.52C0 31.128 28.848 0 64.44 0z m0 54.784H64.44c-7.552 0-13.672 6.6-13.672 14.744V954.48c0 8.144 6.12 14.744 13.672 14.744h892.064c7.544 0 13.664-6.6 13.664-14.744V69.52c0-8.144-6.12-14.744-13.664-14.744zM516 200C619.832 200 704 284.168 704 388c0 62.016-30.024 117.016-76.336 151.256C756.088 585.096 848 707.816 848 852a28 28 0 1 1-56 0C792 699.568 668.432 576 516 576 363.568 576 240 699.568 240 852a28 28 0 1 1-56 0c0-144.184 91.912-266.896 220.336-312.752C358.024 505.016 328 450.016 328 388 328 284.168 412.168 200 516 200z m0 56C443.096 256 384 315.096 384 388S443.096 520 516 520 648 460.904 648 388 588.904 256 516 256z" fill="#6F778F" p-id="4455"></path></svg>
      </div>
      
      <div class="nav-view-dis">
        <h4 v-show="isView==true">{{realName | name}}</h4>
        <div class="nav-view-dis-cen" v-show="isView==true">
          <van-rate
            v-model="point"
            :size="21"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            
          />
        </div>
        <div class="nav-view-dis-but" v-show="isView==true">
          <span>
          {{phone | phone}} 
          </span>
        </div>
        <div class="nav-view-dis-login" v-show="isView==false" @click="login_out">
          立即登录
        </div>
      </div>
      <div class="nav-view-icon" @click="pushPrivate">
        <van-icon name="arrow" size="45px"/>
      </div>
    </div>
    
    </div>
</template>

<script>
export default {
  name:"proNav",
  data(){
    return {
      // 用户手机号
      phone:'',
      // 用户头像
      avatarImg:'',
      // 用户真是姓名
      realName:'',
      // 用户星级
      point:'',
      // 定义登录/退出 dom显示
      flag:true
    }
  },
  created(){
    this.getProfileInfo()
  },
  computed:{
    isView(){
      let _v = this.$store.state.token;
      if(_v == ''){
        return false
      }
      return true
    }
  },
  filters:{
    phone(value){
      if(value==null) return ''
      let showPhone =  value.replace(/^(\d{3})\d{4}(\d+)/,"$1****$2")
      return showPhone
    },
    name(value){

      let str = "Hi~,";
      if(str==null) return str;
      return str + value;
    }
  },
  methods:{
    // 获取个人相关信息
    getProfileInfo(){
      this.phone = this.$store.state.userInfo.phone_number
      this.realName = this.$store.state.userInfo.RealInformation.RealName
      this.point = this.$store.state.userInfo.point
    },
    // 切换到设置页
    routerChange(){
      this.$router.push('/set');
    },
    // 切换到 "个人信息" 路由页
    pushPrivate(){
      this.$router.push('/privateInfo');
    },
    // 退出登录
    login_out(){
      if(this.isView){
        this.$toast.loading();
        setTimeout(() => {
          this.$toast.clear();
          // this.$router.push('/home');
          this.$store.dispatch('getToken','');
          this.$store.dispatch('loginOut','')
          window.sessionStorage.clear();
          this.isView = false
        },500);
        
      }else {
        
        this.$toast.loading();
        setTimeout(() => {
          this.$toast.clear();
          // this.$router.push('/home');
           this.$router.push('/login')
          // this.flag = false
        },500);
       
      }
      
    }

  }
}
</script>

<style lang="less">
.nav {
    border-radius: 0px 0px 20px 20px;
    background-color: rgba(98, 166, 235, 100);
    text-align: center;
    width: 100%;
    height: 150px;
    line-height: 20px;
  }
.nav-header {
  height: 50px;
  width: 100%;
  .nav-hea-io {
    margin-left: 20px;
    margin-top: 5px;
    float: left;
  }
  .nac-header-service {
    float: right;
    margin-right: 20px;
    margin-top: 5px;
  }
  .nav-header-set {
    float: right;
    margin-right: 23px;
    margin-top: 5px;
  }
}
.nav-view {
  display: flex;
  margin-top: 0px;
  height: 100px;
  width: 100%;
  // border: 1px solid red; 
  .nav-view-img img{
    width: 90px;
    height: 90px;
    border-radius: 20px 20px 20px 20px;
    margin-left: 25px;
    margin-top: 0px;
  }
  .svg {
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 29px;
  }
  .nav-view-dis {
    position: relative;
    height: 100%;
    width: 190px;
    margin-left: 17px;
    margin-top: 0px;
    // border: 1px solid green;
    h4 {
      font-family: PingFangSC-regular;
      color: rgba(255, 255, 255, 100);
      font-size: 17px;
      text-align: left;
      margin-top: 5px;
      margin-left: 10px;
    }
    .nav-view-dis-cen {
      text-align: left;
      margin-top: -10px;
      // margin-top: 5px;
      margin-left: 10px;
    }
    .nav-view-dis-login {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 35px;
      width: 120px;
      text-align: center;
      border-radius: 50px 50px 50px 50px;
      background-color: rgba(179, 216, 255, 100);
      color: rgba(255, 255, 255, 100);
      font-size: 14px;
      margin-top: 25px;
      // margin-left: 0px;
      font-family: Microsoft Yahei;
    }
    .nav-view-dis-but {
      text-align: left;
      margin-top: 10px;
      margin-left: 10px;
      span{
        font-family: PingFangSC-regular;
        color: rgba(255, 255, 255, 100);
        font-size: 14px;
      }
    }
  }
  .nav-view-icon {
      // background-color: rgba(255, 255, 255, 100);
      margin-top: 20px;
      margin-left: 0px;

  }
}
</style>